<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增</title>
    <link href="/ssm/static/layui/css/layui.css" rel="stylesheet">
    <script src="/ssm/static/layui/layui.js"></script>
    <style>
        .layui-form {
            margin-top: 20px;
        }

        .demo-login-container {
            width: 300px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

<form class="layui-form">
    <div class="demo-login-container">
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <input type="text" name="courseName" lay-verify="required" placeholder="课程名称" autocomplete="off" class="layui-input">

            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <input type="text" name="coachName" lay-verify="required" placeholder="教练" autocomplete="off" class="layui-input">

            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <select name="typeId" lay-filter="courseType" id="courseSelect">
                    <option value="0">请选择课程类型</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <input type="text" name="price" lay-verify="required" placeholder="价格" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <textarea name="comment" placeholder="请编写课程介绍" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                    <i class="layui-icon layui-icon-upload"></i>图片上传
                </button>
                <div style="width: 132px;">
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
                <button type="submit" class="layui-btn layui-btn-fluid" lay-submit lay-filter="add">新增</button>
        </div>
    </div>
</form>


<script>
    layui.use(function () {
        let form = layui.form;
        let $ = layui.$;
        let layer = layui.layer;
        let upload = layui.upload;

        let fileName;


        let select =  $('#courseSelect')
        // 发送请求  获取课程类型下拉选数据
        $.get('/ssm/courseType/options',function (res){
            let types = res.data;  // []
            types.forEach(courseType=>{
                let option =  $('<option></option>')
                option.attr("value",courseType.id)
                option.text(courseType.type)
                select.append(option)
            })
            form.render()
        })


        // 渲染
        upload.render({
            elem: '#ID-upload-demo-btn',
            url: '/ssm/course/img/upload', // 此处配置你自己的上传接口即可
            accept: 'file', // 普通文件
            before: function(obj){
                // 预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                });
            },
            done: function (res) {
               fileName = res.data;
            }
        });

        form.on("submit(add)", function (obj) {
            let formData = obj.field;
            formData.img= fileName
            $.post("/ssm/course/uploadInfo",formData,function (res){
                if (res.code==0){
                    layer.msg(res.message,{icon:1},function (){
                        let index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                    })
                }
            })
            return false;
        })
    })
</script>
</body>
</html>